<script setup lang="ts">
import { ref, watch } from 'vue';

import { message } from 'ant-design-vue';
import dayjs from 'dayjs';

interface InpatientGroup {
  id: string;
  petId: string;
  admissionDate: any;
  conditionClassification: string;
  responsibleDoctor: string;
  dischargeMethod: 'manual' | 'specified';
  dischargeDate?: any;
  stayDuration: number;
  remarks: string;
  status: 'active' | 'discharged';
  createTime: string;
}

interface Props {
  visible: boolean;
  inpatientGroup?: InpatientGroup | null;
  pet?: any;
  isEdit?: boolean;
  editData?: any;
}

interface Emits {
  (e: 'update:visible',visible: boolean): void;
  (e: 'success',data: any): void
}

const props = defineProps<Props>();
const emit = defineEmits<Emits>();

// 表单数据
const formData = ref({
  date: dayjs(),
  cleaning: false,
  waterRefill: false,
  feeding: false,
  defecation: false,
  urination: false,
  temperatureMeasurement: false,
  abnormalConditions: '',
  nursingRecords: '',
  consumptionTotal: 0,
});

// 重置表单
const resetForm = () => {
  formData.value = {
    date: dayjs(),
    cleaning: false,
    waterRefill: false,
    feeding: false,
    defecation: false,
    urination: false,
    temperatureMeasurement: false,
    abnormalConditions: '',
    nursingRecords: '',
    consumptionTotal: 0,
  };
};

// 监听props变化
watch(
  () => props.visible,
  (visible) => {
    if (visible) {
      if (props.isEdit && props.editData) {
        // 编辑模式：填充表单数据
        Object.assign(formData.value, props.editData);
      } else {
        // 新增模式：重置表单
        resetForm();
      }
    }
  },
);

// 取消
const handleCancel = () => {
  emit('update:visible', false);
  resetForm();
};

// 确定
const handleOk = () => {
  if (!formData.value.nursingRecords.trim()) {
    message.warning('请填写护理记录');
    return;
  }

  // 构建日志数据
  const logData = {
    id: Date.now().toString(),
    date: formData.value.date.format('YYYY-MM-DD'),
    cleaning: formData.value.cleaning,
    waterRefill: formData.value.waterRefill,
    feeding: formData.value.feeding,
    defecation: formData.value.defecation,
    urination: formData.value.urination,
    temperature: formData.value.temperatureMeasurement,
    abnormalConditions: formData.value.abnormalConditions,
    nursingRecords: formData.value.nursingRecords,
    consumptionTotal: formData.value.consumptionTotal,
  };

  // 发送数据给父组件
  emit('success', logData);
  message.success('住院日志添加成功！');
  emit('update:visible', false);
  resetForm();
};
</script>

<template>
  <a-modal
    :visible="visible"
    :title="isEdit ? '编辑住院日志' : '添加住院日志'"
    width="800px"
    @cancel="handleCancel"
    @ok="handleOk"
  >
    <a-form layout="vertical">
      <a-row :gutter="16">
        <a-col :span="8">
          <a-form-item label="日期">
            <a-date-picker
              v-model:value="formData.date"
              format="YYYY-MM-DD"
              style="width: 100%"
            />
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="16">
        <a-col :span="24">
          <a-form-item label="日常护理">
            <div class="nursing-checkboxes">
              <a-checkbox v-model:checked="formData.cleaning">打扫</a-checkbox>
              <a-checkbox v-model:checked="formData.waterRefill"
                >装水</a-checkbox
              >
              <a-checkbox v-model:checked="formData.feeding">灌食</a-checkbox>
              <a-checkbox v-model:checked="formData.defecation"
                >大便</a-checkbox
              >
              <a-checkbox v-model:checked="formData.urination">小便</a-checkbox>
              <a-checkbox v-model:checked="formData.temperatureMeasurement"
                >测体温</a-checkbox
              >
            </div>
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="异常情况">
            <a-textarea
              v-model:value="formData.abnormalConditions"
              placeholder="请输入异常情况"
              :rows="3"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="护理记录">
            <a-textarea
              v-model:value="formData.nursingRecords"
              placeholder="请输入护理记录"
              :rows="3"
            />
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="16">
        <a-col :span="8">
          <a-form-item label="消费合计">
            <a-input-number
              v-model:value="formData.consumptionTotal"
              :min="0"
              :precision="2"
              style="width: 100%"
              addon-after="¥"
            />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
</template>

<style scoped>
:deep(.ant-checkbox-group) {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
</style>
